<template>
  <div class="container">
    <div class="title">
      <span>资产负债表</span>
      <el-date-picker
        v-model="monthRange"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="YYYY-MM"
        @change="getDebt"
      >
      </el-date-picker>
    </div>
    <div v-for="item in monthEve" :key="item.keyMonth">
      <span class="tableTitle">{{ item.keyMonth }}</span>
      <el-table :data="item.keyData" width="100%" border height="780" stripe
        ><el-table-column prop="asset" label="资产" max-width="170" />
        <el-table-column prop="line_number" label="行次" max-width="170" />
        <el-table-column
          prop="year_end_balance"
          label="期末余额"
          max-width="170"
        />
        <el-table-column
          prop="year_start_balance"
          label="年初余额"
          max-width="170"
        />
        <el-table-column
          prop="liability_equity"
          label="负债和所有者权益"
          max-width="170"
        />
        <el-table-column prop="le_line_number" label="行次" max-width="170" />
        <el-table-column
          prop="le_year_end_balance"
          label="期末余额"
          max-width="170"
        />
        <el-table-column
          prop="le_year_start_balance"
          label="年初余额"
          max-width="170"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getDebtList } from "@/api/getList";
import { ElMessage } from "element-plus";
const monthRange = ref([]);
const monthEve = ref([]);
monthRange.value[0] = history.state.startMonth;
monthRange.value[1] = history.state.endMonth;
const getDebt = () => {
  getDebtList({
    start_month: monthRange.value[0],
    end_month: monthRange.value[1],
  }).then((res) => {
    if (Object.keys(res.data).length === 0) {
      ElMessage.error("文件不存在，请上传！");
    } else {
      monthEve.value = [];
      for (const key in res.data) {
        monthEve.value.push({
          keyMonth: key,
          keyData: res.data[key],
        });
      }
    }
  });
};
onMounted(() => {
  getDebt();
});
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 142px);
  background: @mainColor;

  .title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  span {
    margin: 1vw;
  }
}
.tableTitle {
  display: inline-block;
  margin: 1vh;
  font-size: 1.2vw;
}
:deep(.title) {
  width: 25vw;
}
</style>
